<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>会员列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="/resource/layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="/resource/css/mylay.css">
		<link rel="stylesheet" href="./layui/layui/css/layui.css">
		<link rel="stylesheet" href="/resource/css/kpi_list.css">
		</link>
	</head>

	<body>

		<div class="all">
			<!-- 表单元素 -->
			<div class="layui-tab">

				<ul class="layui-tab-title" id="head">
					<li id="only" class="layui-this">个人业绩奖励查询</li>
					<li id="some">团队业绩奖励查询</li>
				</ul>

				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show geRenYeJi">
						<div style="padding: 20px; background-color: #F2F2F2;">
							<div class="layui-row layui-col-space15">
								<div class="layui-col-md12">
									<div class="layui-card" style="padding: 10px;">
										<form class="layui-form search">
											<div class="layui-form-item">
												<div class="layui-inline">
													<label class="layui-form-label">统计时间</label>
													<div class="layui-input-inline">
														<input class="layui-input" id="gerenRange" name="gerenRange"
															autocomplete="off">
													</div>
												</div>
												<div class="layui-inline">
													<label class="layui-form-label">用户账户</label>
													<div class="layui-input-inline">
														<input class="layui-input" name="username" autocomplete="off">
													</div>
												</div>
												<div class="layui-inline">
													<label class="layui-form-label">直属上级</label>
													<div class="layui-input-inline">
														<input class="layui-input" name="account" autocomplete="off">
													</div>
												</div>
												<div class="layui-form-mid" id="user">用户等级</div>
												<div class="layui-input-inline" style="width: 100px;">

													<select name="level" lay-verify="" id="selete">
														<option value="0">全部</option>
														<option value="1">LV1</option>
														<option value="2">LV2</option>
														<option value="3">LV3</option>
														<option value="4">LV4</option>
														<option value="5">LV5</option>
														<option value="6">LV6</option>
														<option value="7">LV7</option>
													</select>

												</div>

												<div class="layui-inline" style="text-align: center;">
													<button type="button" class="layui-btn" id="layui-btn1"
														data-type="search">搜索</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<table id="geRenYeJi" lay-filter="personageTable"></table>
						<script type="text/html" id="personageOperation">
							<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="grant">发放</a>
							<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="refused">拒绝</a>
						</script>
					</div>
					<div class="layui-tab-item tuanDuiYeJi">
						<div style="padding: 20px; background-color: #F2F2F2;">
							<div class="layui-row layui-col-space15">
								<div class="layui-col-md12">
									<div class="layui-card" style="padding: 10px;">
										<form class="layui-form search">
											<div class="layui-form-item">
												<div class="layui-inline">
													<label class="layui-form-label">统计时间</label>
													<div class="layui-input-inline">
														<input class="layui-input" id="tuanduiRange" name="tuanduiRange2"
															autocomplete="off">
													</div>
												</div>
												<div class="layui-inline">
													<label class="layui-form-label">用户账户</label>
													<div class="layui-input-inline">
														<input class="layui-input" name="username2" autocomplete="off">
													</div>
												</div>
												<div class="layui-inline">
													<label class="layui-form-label">直属上级</label>
													<div class="layui-input-inline">
														<input class="layui-input" name="account2" autocomplete="off">
													</div>
												</div>
												<div class="layui-form-mid" id="user">用户等级</div>
												<div class="layui-input-inline" style="width: 100px;">

													<select name="level2" lay-verify="" id="selete">
														<option value="0">全部</option>
														<option value="1">LV1</option>
														<option value="2">LV2</option>
														<option value="3">LV3</option>
														<option value="4">LV4</option>
														<option value="5">LV5</option>
														<option value="6">LV6</option>
														<option value="7">LV7</option>
													</select>

												</div>


												<div class="layui-inline" style="text-align: center;">
													<button type="button" class="layui-btn" id="layui-btn2"
														data-type="search">搜索</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<table id="tuanDuiYeJi" lay-filter="teamTable"></table>
						<script type="text/html" id="subordinate">
							<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="subordinateBtn" data={{d.uid}}>直属下级团队</a>
						</script>
					</div>
				</div>
			</div>
		</div>
		<script src="/resource/layuiadmin/layui/layui.js"></script>
		<script src="/resource/js/manage/init_date.js"></script>
		<script src="/manage/user.js"></script>
		<script src="./layui/layui/layui.js"></script>
		<script>
			//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
			layui.use(['element', 'table', 'form'], function() {
				var form = layui.form;
				var element = layui.element;
				var $ = layui.$;
				var table = layui.table;
				var laydate = layui.laydate;
				laydate.render({
					elem: '#tuanduiRange',
					type: 'datetime',
					range: true
				});
				laydate.render({
					elem: '#gerenRange',
					type: 'datetime',
					range: true
				});
				//-----------------------个人
				table.render({
					elem: '#geRenYeJi',
					title: "代理奖励查询列表",
					url: '/manage/useragent/kpilist',
					method: 'get',
					cols: [
						[
							//表头
							{
								field: 'username',
								title: '用户账户'
							}, {
								field: 'susername',
								title: '直属上级'
							}, {
								field: 'vip_level',
								title: '用户等级'
							}, {
								field: 'total_tasks',
								title: '完成任务数'
							}, {
								field: 'total_task_amount',
								title: '完成任务总额'
							}
						]
					],
					cellMinWidth: 100,
					toolbar: '#toolbarDemo',
					defaultToobar: ["filter", 'print', 'exports'],
					totalRow: true,
					page: {
						layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
					},
					skin: 'row' //行边框风格
						,
					even: true //开启隔行背景

				});
				active1 = {
					search: function() {
						//执行重载
						table.reload('geRenYeJi', {
							page: {
								curr: 1 //重新从第 1 页开始
							},
							where: {
								username: $("input[name='username']").val(),
								account: $("input[name='account']").val(),
								level: $("select[name='level'] option:selected").val(),
								datetime_range: $("input[name='gerenRange']").val(),
							}
						}, 'data');
					}
				};

				$('.geRenYeJi #layui-btn1').on('click', function() {
					var type = $(this).data('type');
					active1[type] ? active1[type].call(this) : '';
				});

				//查询团队
				table.render({
					elem: '#tuanDuiYeJi',
					title: "代理奖励查询列表",
					url: '/manage/useragent/kpilist?performance_type=2',
					method: 'get',
					cols: [
						[
							//表头
							{
								field: 'username',
								title: '用户账户',
							}, {
								field: 'uid',
								title: '直属下级',
								toolbar: '#subordinate',
							}, {
								field: 'susername',
								title: '直属上级'
							}, {
								field: 'vip_level',
								title: '用户等级'
							}, {
								field: 'total_tasks',
								title: '完成任务数'
							}, {
								field: 'total_task_amount',
								title: '完成任务总额'
							}
						]
					],
					cellMinWidth: 100,
					toolbar: '#toolbarDemo',
					defaultToobar: ["filter", 'print', 'exports'],
					totalRow: true, //求和
					page: {
						layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
					},
					skin: 'row' //行边框风格
						,
					even: true //开启隔行背景

				});
				
				//直属下级
				table.on('tool(teamTable)', function(obj) {
					var data = obj.data;
					if (obj.event === 'subordinateBtn') {
						console.log('直属下级',data.uid)
						table.reload('tuanDuiYeJi', {
							page: {
								curr: 1 //重新从第 1 页开始
							},
							where: {
								username: $("input[name='username2']").val(),
								account: $("input[name='account2']").val(),
								level: $("select[name='level2'] option:selected").val(),
								datetime_range: $("input[name='tuanduiRange2']").val(),
								sid:data.uid
							}
						}, 'data');
					}
				});
				
				active2 = {
					search: function() {
						//执行重载
						table.reload('tuanDuiYeJi', {
							page: {
								curr: 1 //重新从第 1 页开始
							},
							where: {
								username: $("input[name='username2']").val(),
								account: $("input[name='account2']").val(),
								level: $("select[name='level2'] option:selected").val(),
								datetime_range: $("input[name='tuanduiRange2']").val()
							}
						}, 'data');
					}
				};

				$('.tuanDuiYeJi #layui-btn2').on('click', function() {
					var type = $(this).data('type');
					active2[type] ? active2[type].call(this) : '';
				});

				//下拉框
				var data = [{
						name: 'LV1',
						value: 1
					},
					{
						name: 'LV2',
						value: 2
					},
					{
						name: 'LV3',
						value: 3
					},
					{
						name: 'LV4',
						value: 4
					},
					{
						name: 'LV5',
						value: 5
					},
					{
						name: 'LV6',
						value: 6
					},
					{
						name: 'LV7',
						value: 7
					}
				];
				//切换
				var only = document.getElementById('only');
				var some = document.getElementById('some');
				only.onclick = function() {
					this.style.backgroundColor = 'white';
					some.style.backgroundColor = 'rgb(242,242,242)';
				}
				some.onclick = function() {
					this.style.backgroundColor = 'white';
					only.style.backgroundColor = 'rgb(242,242,242)';
				}
				// layui.$.ajax({
				// 	url: '/manage/useragent/kpilist',
				// 	type: 'get',
				// 	// data:json,
				// 	success: function(data) {
				// 		console.log(data)
				// 	},
				// 	error: function(e) {
				// 		layer.alert("请求失败！")
				// 	},
				// });
				//监听工具条


			});
		</script>
	</body>
</html>